<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="layui/layui.js" type="text/javascript"></script>
    <script type="text/javascript" src="layui/tableSelect.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>
<script type="text/html" class="demoTable" id="myDiv">
    搜索证券名：
    <div class="layui-inline" >
        <input class="layui-input" name="id" id="securityName" autocomplete="off">
    </div>

    <button class="layui-btn" data-type="reload" lay-event="selecttwo">搜索</button>
    <button class="layui-btn" data-type="reload" lay-event="insert">新增</button>
</script>
<script>
    layui.use(['table'], function () {
        var $ = layui.$;
        var table = layui.table;
        var form = layui.form;
        table.render({
            elem: '#track'
            ,id: 'testSecurity'
            ,totalRow: true
            ,page: true
            ,url:'select?securityName='
            ,toolbar:'#myDiv'
            ,cellMinWidth: 80//全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {field:'securityId',title: '证券编号'}
                ,{field:'securityName',title: '证券名称'}
                ,{field:'securitType',title: '证券类型'}
                ,{field:'stockId', title: '股票板块'}
                // ,{fixed: 'releaseDate', title:'发行日期',}
                ,{field:'delayDate', title: '延迟日期'}
                ,{field:'exchangeName', title: '交易所'}
                ,{field:'securityBeiiZhu', title: '备注'}

                ,{fixed: 'right', title:'操作' ,align:'center', toolbar: '#barDemo'}
            ]]
        });
        table.on('toolbar(track)',function (obj) {
            if (obj.event=='selecttwo'){
                table.reload('testSecurity',{
                    url:'select'
                    ,where: {
                        'securityName': $("#securityName").val(),
                    }
                    ,page:{
                        curr:1
                    }
                });
            }else if (obj.event=='insert'){
                var index=layer.open({
                    type: 1,
                    title: '添加证券信息',
                    closeBtn: 1,
                    move:false,
                    content:$("#add")
                });
            }
        });
        table.on('tool(track)',function (obj) {
            alert("嘿嘿嘿")
            var data = obj.data;
            if (obj.event=='delete'){
                alert(data.securityId);
                $.get('delete','securityId='+data.securityId,function (msg) {
                    table.reload('testReload')
                })
            }else if (obj.event=='update'){
                var bookObj=$.parseJSON(JSON.stringify(data));
                form.val("upform",bookObj);
                var index=layer.open({
                    type: 1,
                    title: '修改用户信息',
                    closeBtn: 1,
                    move:false,
                    content:$("#up")
                });
            }
        })

        form.on('submit(addsubmit)',function () {
            alert("新增表单提交");
            var formData= form.val("addform");
            $.get('insertrole',formData,
                function(msg) {
                    table.reload('testReload')
                    alert(msg)
                });
        });
        form.on('submit(upsubmit)',function () {
            alert("修改表单提交");
            var formData= form.val("upform");
            $.get('updaterole',formData,
                function(msg) {
                    table.reload('testReload')
                    alert(msg)
                });
        });
    });
    layui.use(['tableSelect'],function () {
        //加载用到layui组件
        var form = layui.form;
        var $=layui.$;
        var tableSelect = layui.tableSelect;
        //下拉表格 的渲染
        tableSelect.render({
            elem: '#demo',//渲染表格 与 文本框绑定
            searchKey:'stockName',//后端根据这个名称得到下拉表格中文本框的值
            table: {
                url: 'selectstock?stockName=',//数据接口
                cols: [[
                    {field:'stockId',title: '板块编号'}
                    ,{field:'stockName',title: '板块名称'}
                    ,{field:'stockFatherId',title: '父板块编号'}
                    ,{field:'stockType', title: '备注'}
                ]]
            },
            //回调函数
            done: function (elem, data) {
                /* var NWEJOIN=[]*/
                layui.each(data.data, function (index, item) {
                    //将值添加到文本框中
                    /*NWEJOIN.push(item.userName);*/
                    $("#demo").val(item.userName);
                   // $("#stockId").val(item.userId);
                })
                /*elem.val(NEWJSON.join(","));*/
            }
        })
    })
</script>
<table id="track" lay-filter="track"></table>

<div id="add"
     style="display: none; height: 100%; height: 100%; text-align: center;">
    <form id="addform" lay-filter="addform"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block;">
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">证券编号</label>
            <div class="layui-input-inline">
                <input type="text" name="securityId" lay-verify="required"
                       autocomplete="off" placeholder="请输入编号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">证券名称</label>
            <div class="layui-input-inline">
                <input type="text" name="securityName" lay-verify="required"
                       autocomplete="off" placeholder="请输入名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">证券类型</label>
            <div class="layui-input-block">
                <input type="radio" name="securitType" value="1" title="股票">
                <input type="radio" name="securitType" value="2" title="债券">
                <input type="radio" name="securitType" value="3" title="基金">
            </div>
        </div>

        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">股票板块：</label>
            <div class="layui-input-inline">
                <input type="text" name="stockId" id="demo"  lay-verify="required"
                       autocomplete="off" placeholder="请选择" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">发行日期：</label>
            <div class="layui-input-inline">
                <input type="text" name="releaseDate" lay-verify="required"
                       autocomplete="off" placeholder="请选择" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">延迟日期：</label>
            <div class="layui-input-inline">
                <input type="text" name="delayDate" lay-verify="required"
                       autocomplete="off" placeholder="请选择" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">交易所：</label>
            <div class="layui-input-inline">
                <input type="text" name="exchangeName" lay-verify="required"
                       autocomplete="off" placeholder="请选择" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-inline">
                <input type="text" name="securityBeiiZhu" lay-verify="required"
                       autocomplete="off" placeholder="请输入备注" class="layui-input">
            </div>
        </div>
        <div style="position: absolute; bottom: 0px; left: 20%;">
            <button class="layui-btn" lay-submit="" lay-filter="addsubmit">
                <i class="layui-icon">&#x1005;</i>添加
            </button>
        </div>
        <div style="position: absolute; bottom: 0px; left: 50%;">
            <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
            <button class="layui-btn layui-bg-red cancel" type="button">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>
<div id="up"
     style="display: none; height: 100%; height: 100%; text-align: center;">
    <form id="upform" lay-filter="upform"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block;">
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">证券编号</label>
            <div class="layui-input-inline">
                <input type="text" name="securityId" lay-verify="required"
                       autocomplete="off" placeholder="请输入编号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">证券名称</label>
            <div class="layui-input-inline">
                <input type="text" name="securityName" lay-verify="required"
                       autocomplete="off" placeholder="请输入名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">证券类型</label>
            <div class="layui-input-block">
                <input type="radio" name="securitType" value="1" title="股票">
                <input type="radio" name="securitType" value="2" title="债券">
                <input type="radio" name="securitType" value="3" title="基金">
            </div>
        </div>

        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">股票板块：</label>
            <div class="layui-input-inline">
                <input type="text" name="stockId" lay-verify="required"
                       autocomplete="off" placeholder="请选择" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">发行日期：</label>
            <div class="layui-input-inline">
                <input type="text" name="releaseDate" lay-verify="required"
                       autocomplete="off" placeholder="请选择" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">延迟日期：</label>
            <div class="layui-input-inline">
                <input type="text" name="delayDate" lay-verify="required"
                       autocomplete="off" placeholder="请选择" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">交易所：</label>
            <div class="layui-input-inline">
                <input type="text" name="exchangeName" lay-verify="required"
                       autocomplete="off" placeholder="请选择" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-inline">
                <input type="text" name="securityBeiiZhu" lay-verify="required"
                       autocomplete="off" placeholder="请输入备注" class="layui-input">
            </div>
        </div>
        <div style="position: absolute; bottom: 0px; left: 20%;">
            <button class="layui-btn" lay-submit="" lay-filter="upsubmit">
                <i class="layui-icon">&#x1005;</i>修改
            </button>
        </div>
        <div style="position: absolute; bottom: 0px; left: 50%;">
            <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
            <button class="layui-btn layui-bg-red cancel" type="button">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>
<div style="display: none;" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="update"><i
            class="layui-icon">&#xe642;</i>修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i
            class="layui-icon">&#xe640;</i>删除</a>
</div>

</body>
</html>